<template>
  <div class="infoForm">
    <el-form
      ref="ruleFormRef"
      label-position="top"
      :model="infoFormData"
      :rules="rules"
      status-icon
      hide-required-asterisk="true"
    >
      <font style="color: #999; font-size: 1.5em">个人信息</font>
      <el-divider>
        <el-icon style="color: #999"><star-filled /></el-icon>
      </el-divider>
      <el-row justify="space-around">
        <el-col :span="10">
          <el-form-item label="用户名">
            <el-input
              v-model="infoFormData.userName"
              disabled
              placeholder="请输入用户名"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="昵称" prop="nickName">
            <el-input
              v-model="infoFormData.nickName"
              :disabled="isDisabled"
              placeholder="请输入昵称"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row justify="space-around">
        <el-col :span="10">
          <el-form-item label="状态">
            <el-select
              style="width: 100%"
              v-model="infoFormData.status"
              disabled
              placeholder="请选择"
            >
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="性别" prop="sex">
            <el-select
              style="width: 100%"
              v-model="infoFormData.sex"
              :disabled="isDisabled"
              placeholder="请选择"
            >
              <el-option value="1" label="男"></el-option>
              <el-option label="女" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row justify="space-around">
        <el-col :span="10">
          <el-form-item label="电话号码">
            <el-input
              v-model="infoFormData.phone"
              disabled
              placeholder="请输入电话号码"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="电子邮件地址" prop="email">
            <el-input
              v-model="infoFormData.email"
              :disabled="isDisabled"
              placeholder="请输入电子邮件地址"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <br />
      <font style="color: #999; font-size: 1.5em">个人简介</font>
      <br />
      <br />
      <el-row justify="space-around">
        <el-col :span="22">
          <el-form-item label="说明">
            <el-input
              type="textarea"
              placeholder="Please input"
              v-model="infoFormData.introduce"
              show-word-limit
              autosize
              maxlength="400"
              :disabled="isDisabled"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="btn">
      <el-button
        color="#626aef"
        :dark="isDark"
        @click="upload"
        :disabled="!isDisabled"
        :plain="!isDisabled"
        size="large"
        icon="RemoveFilled"
        v-if="isDisabled"
        >修改</el-button
      >

      <el-button
        color="#886aef"
        :dark="isDark"
        @click="cancelUpdateInfo"
        :plain="!isDisabled"
        size="large"
        icon="RemoveFilled"
        v-else
        >取消修改</el-button
      >

      <el-button
        color="#626aef"
        :dark="isDark"
        @click="save(ruleFormRef)"
        :disabled="isDisabled"
        :plain="isDisabled"
        size="large"
        icon="SuccessFilled"
        >保存</el-button
      >
    </div>
  </div>
</template>
  
  <script setup>
import { ElMessage } from "element-plus";
import { ref } from "vue";
import { reqUserInfo, reqUserUpdate } from "@/api/user";
import useUserStore from "@/store/modules/user";

let userStore = useUserStore();

// 控制表单是否可编辑
let isDisabled = ref(true);
// 是否处于编辑状态
let isEdit = ref(false);
// 保存对话框
let isSavaDialogVisible = ref(false);

// 个人信息表单数据
let infoFormData = ref({
  userName: "",
  sex: "",
  phone: "",
  status: "",
  email: "",
  introduce: "",
});

// 表单实例
const ruleFormRef = ref();

// 表单校验规则
const rules = ref({
  nickName: [
    { required: true, message: "请输入昵称", trigger: "blur" },
    { min: 1, max: 5, message: "Length should be 1 to 5", trigger: "blur" },
  ],
  phone: [
    { required: true, message: "请输入号码", trigger: "blur" },
    {
      pattern:
        /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/,
      message: "请输入合法的号码",
      trigger: "blur",
    },
  ],
  email: [
    { required: true, message: "请输入邮箱", trigger: "blur" },
    {
      pattern:
        /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
      message: "请输入正确邮箱格式",
      trigger: "blue",
    },
  ],
  sex: [{ required: true, message: "请选择性别", trigger: "change" }],
});

// 获取个人信息
const getInfo = () => {
  // console.log(userStore.info);
  infoFormData.value = userStore.info;
  infoFormData.value.sex = String(infoFormData.value.sex);
  infoFormData.value.status = String(infoFormData.value.status);
};

getInfo();

// 修改按钮
const upload = () => {
  isDisabled.value = !isDisabled.value;
};
// 保存按钮 弹出确定保存对话框
const save = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      // console.log("输入了");
      reqUserUpdate(infoFormData.value).then((res) => {
        if (res.code == 200) {
          ElMessage.success("修改成功！");
          getInfo();
        } else {
          ElMessage.error(res.data);
        }
      });
      isDisabled.value = !isDisabled.value;
    } else {
      // console.log("没有输入");
    }
  });
};

// 取消修改  取消修改时 重新调接口回显数据，防止用户通过双向绑定修改了部分数据，但是没有保存
const cancelUpdateInfo = () => {
  getInfo();
  isDisabled.value = !isDisabled.value;
};
</script>
  
  <style scoped lang="scss">
.infoForm {
  width: 100%;
  height: 100%;
  .btn {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 50px;
  }
}
</style>